html {
  width: 100%;
}
#app {
  padding-bottom: 10rem;
  .content_wrap {
    margin: 0 auto;
    padding: 0.5rem;
    width: 100%;
    max-width: 140rem;
    min-width: 100rem;
    .head_btns {
      width: 100%;
      padding: 3rem 0;
      transform: translateY(-10rem);
      opacity: 0;
      &.open {
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        opacity: 1;
        transform: none;
      }
      button {
        font-size: 1.8rem;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      transform: translateY(10rem);
      opacity: 0;
      &.open {
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        opacity: 1;
        transform: none;
      }
      th,
      td {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding: 1rem;
        border: 1px solid var(--color8);
        word-break: break-all;
      }

      thead {
        tr {
          color: var(--color1);
          height: 5rem;
          background-color: var(--color9);
        }
      }

      tbody {
        tr.active {
          color: #155724;
          background-color: #d4edda;
        }
      }
    }
    .pagination_box {
      padding: 3rem 0;
      transform: translateY(10rem);
      opacity: 0;
      &.open {
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        opacity: 1;
        transform: none;
      }
    }
  }
}
